<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2022-02-07 14:45:39
 * @LastEditTime: 2022-02-08 11:31:48
 * @LastEditors: xuechengwu
-->
<template>
  <div class="inner-state-editor-box">
        <div class="inner-state-editor-title">
            <h5>页面数据</h5>
            <div class="inner-state-editor-btn">
                <el-button type="primary" size="mini" @click="show = true">新增</el-button>
            </div>
        </div>
        <div class="inner-state-list">
            <div
                class="inner-state-list-item data-title"
                v-if="pageData.length !== 0"
            >
                <div class="inner-state-data-name">名称</div>
                <div class="inner-state-data-value">
                   取值
                </div>
                <div class="inner-state-data-tool">
                    
                </div>
            </div>
            <div
                v-for="(item) in pageData"
                :key="item.path"
                class="inner-state-list-item"
            >
                <div class="inner-state-data-name">{{ item.name }}</div>
                <div class="inner-state-data-value" :title="item.value">
                   {{ item.value }} 
                </div>
                <div class="inner-state-data-tool">
                    <i class="el-icon-edit-outline" @click="editPageData(item)"></i>
                    <i class="el-icon-close" @click="removePageData(item)"></i>
                </div>
            </div>
            <el-empty description="还没有建立数据" :image-size="60" v-if="pageData.length === 0">
                <div class="empty-link" @click="show = true">立即创建</div>
            </el-empty>
        </div>
        <el-dialog
            title="新增页面数据"
            :visible.sync="show"
            lock-scroll
            width="480px"
            modal
            show-close
            >
            <div class="body-content">
                <div class="dialog_inner-data-item">
                    <label>数据名称</label>
                    <div class="input-box">
                        <el-input size="mini" v-model="dialogName" @change="nameChange"/>
                    </div>
                </div>
                <div class="dialog_inner-data-item">
                    <label>数据标识</label>
                    <div class="input-box">
                        <el-input size="mini" v-model="dialogKey" :readonly="status === 1"/>
                    </div>
                </div>
                <div class="dialog_inner-data-item dialog_inner-data-value">
                    <label>取值</label>
                    <div class="input-box">
                        <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入内容"
                            v-model="dialogContent"
                        />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="show = false">取消</el-button>
                <el-button type="success" @click="onOk">确认</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
import pinyin from '@/utils/pinyin';
export default {
    props: {
        page: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            show: false,
            dialogName: '',
            dialogContent: '',
            dialogKey: '',
            status: 0, // 0:标识新增，1标识编辑
        };
    },
    computed: {
        pageData() {
            const { datas = {} } = this.page;
            return Object.keys(datas).map(vo => ({
                path: `datas.${vo}`,
                key: vo,
                name: datas[vo].name,
                value: datas[vo].value,
            }));
        }
    },
    methods: {
        nameChange(value) {
            if (this.dialogKey === '') {
                this.dialogKey = pinyin(value);
            }
        },
        onOk() {
            const { mark } = this.page;
            if (this.dialogKey === '') {
                this.$message({
                    type: 'warning',
                    message: '请输入标识',
                });
                return;
            }
            if (this.dialogName === '') {
                this.$message({
                    type: 'warning',
                    message: '请输入数据名称',
                });
                return;
            }
            if (this.dialogContent === '') {
                this.$message({
                    type: 'warning',
                    message: '请输入数据取值',
                });
                return;
            }
            if (this.status === 0) {
                const { page } = this;
                const { datas = {} } = page;
                
                if (datas[this.dialogKey]) {
                    this.$message({
                        type: 'warning',
                        message: '标识已存在，请重新输入标识'
                    });
                    return;
                }
                
            }
            console.log('commit data')
            this.$store.commit('ADD_PAGE_DATA', {
                mark,
                data: {
                    key: this.dialogKey,
                    name: this.dialogName,
                    value: this.dialogContent,
                }
            });
            this.dialogKey = '';
            this.dialogName = '';
            this.dialogContent = '';
            this.show = false;
        },
        editPageData(data) {
            const { key, name, value } = data;
            this.dialogKey = key;
            this.dialogName = name;
            this.dialogContent = value;
            this.status = 1;
            this.show = true;
        },
        removePageData(data) {
            const { key } = data;
            const { mark } = this.page;
            this.$store.commit('REMOVE_PAGE_DATA', {
                mark,
                data: { key },
            });
        }
    }
}
</script>

<style lang="less" scoped>
.inner-state-editor-box {
    .inner-state-editor-title {
        display: flex;
        align-items: center;
        padding: 12px 0;
        .inner-state-editor-btn {
            margin-left: auto;
        }
    }
    .inner-state-list {
        height: 240px;
        overflow-y: auto;
        .inner-state-list-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            position: relative;
            font-size: 12px;
            &.data-title {
                font-weight: 800;
            }
            &::after {
                position: absolute;
                width: 100%;
                display: inline-block;
                content: ' ';
                left: 0;
                bottom: 0;
                background: #DFDFDF;
                height: 1px;
                transform: scaleY(0.6);
            }
            .inner-state-data-name {
                flex: 0 0 64px;
            }
            .inner-state-data-value {
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0 12px;
            }
            .inner-state-data-tool {
                flex: 0 0 32px;
            }
        }
    }
    .empty-link {
        color: rgba(0,146,255,1);
        cursor: pointer;
    }
}
.body-content {
    .dialog_inner-data-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-bottom: 8px;
        &.dialog_inner-data-value {
            align-items: flex-start;
        }
        label {
            width: 72px;
            padding-right: 8px;
            text-align: right;
        }
        .input-box {
            flex: 1;
        }
    }
}
</style>